<template>
	<view class="detailsInfo">
		<view class="table">
			<view class="table_header">
				<view> 付款日期 </view>
				<view> 付款金额 </view>
				<view> 付款方式 </view>
				<view> 优惠 </view>
				<view> 备注 </view>
				<view> 操作 </view>
				<block v-for="(item,index) in list" :key="index">
					<view>{{item.payDay.slice(0,10)}}</view>
					<view>{{item.realAmt}}
						<image class="zuofei" v-if="item.stt=='3'" mode="aspectFit"
							:src="resBaseUrl + '/index/zuofeiicon.png'" alt="" />
					</view>
					<view>{{arr[item.payChannel]}}</view>
					<view>{{item.discountAmt || 0}}</view>
					<view>{{item.remark}}</view>
					<view class="btn" @tap="dele(item)"> 作废</view>
				</block>
			</view>
			<!-- <view class="table_body" v-for="(item,index) in list" :key="index">
				<view>{{item.payDay.slice(0,10)}}</view>
				<view>{{item.realAmt}}
					<image class="zuofei" v-if="item.stt=='3'" mode="aspectFit"
						:src="resBaseUrl + '/index/zuofeiicon.png'" alt="" />
				</view>
				<view>{{arr[item.payChannel]}}</view>
				<view class="btn" @tap="dele(item)"> 作废</view>
			</view> -->
		</view>
	</view>
</template>

<script>
import payType from "../../utils/payType";
	export default {
		data() {
			const _this = this
			return {
				resBaseUrl: _this.resBaseUrl,
				list: [],
				sid: "",
				orderDay: "",
				arr:payType
			};
		},
		props: ["data", "type"],
		onShow() {
			this.$api.InorderReportlistDetailApi({
				data: {
					sid: this.sid,
					orderDay: this.orderDay
				}
			}).then(res => {
				this.list = res.result.list
			})
		},
		onLoad(option) {
			this.sid = option.sid
			this.orderDay = option.orderDay
		},
		methods: {
			dele(item) {

				let that = this
				uni.showModal({
					content: "确定要删除吗？",
					success(res) {
						if (res.confirm) {
							that.$api.lowOrderSaleDeleteApi({
								id: item.id
							}).then(res => {
								that.$api.InorderReportlistDetailApi({
									data: {
										sid: that.sid,
										orderDay: that.orderDay
									}
								}).then(res => {
									that.list = res.result.list
								})
							})
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.detailsInfo {
		// background-color: aqua;
		padding: 20rpx;

		.table {
			min-height: 300rpx;
			background: #fff;
			border-radius: 20rpx;

			.table_header,
			.table_body {
				display: grid;
				text-align: center;
				grid-template-columns: repeat(6, auto);
				margin: 20rpx 0;
			}

			.table_header {
				font-size: 30rpx;
				border-bottom: 1px solid #bdbdbd;

				view {
					height: 80rpx;
					line-height: 80rpx;
				}
			}

			.table_body {
				view {
					height: 60rpx;
					line-height: 60rpx;
					// border-left: 1px solid #eee;
					// border-bottom: 1px solid #eee;
					// border-right: 1px solid #eee;
				}

				.btn {
					background: rgb(254, 52, 48);
					border-radius: 20rpx;
					width: 100rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #fff;
					text-align: center;
					margin: auto;
				}
			}
		}
	}
	.btn {
		background: rgb(254, 52, 48);
		border-radius: 20rpx;
		width: 100rpx;
		height: 60rpx !important;
		line-height: 60rpx !important;
		color: #fff;
		text-align: center;
		margin: auto;
	}
	.zuofei {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		margin-top: 0rpx;
		margin-left: -30rpx;
	}
</style>
